<template>
    <div class="swiper_container">
        <!-- <swiper v-if="swiperList.length > 0" ref="mySwiper" :options="swiperOptions" :style="{ height: height + 'px' }"> -->
        <swiper v-if="swiperList.length > 0" ref="mySwiper" :options="swiperOptions" style="height:100%">
            <swiper-slide v-for='(item, index) in swiperList' :key='index'>

                <img :src="$baseImageUrl+item.url" alt="">

                <div class="desc" v-if="item.description" v-html="item.description"></div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <!-- <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div> -->
        </swiper>
    </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css'
import { getStore } from '@/libs'
export default {
    name: "Slider",
    components: {
        Swiper,
        SwiperSlide
    },
    props: {
        cate: {
            type: [String, Number],
            default: 1
        },
        height: {
            type: [String, Number],
            default: 640,
        },
    },
    data() {
        return {
            swiperOptions: {
                // 自动切换
                autoplay: true,
                loop: true,
                delay: 3000,
                // 前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                // 分页器
                pagination: {
                    el: '.swiper-pagination',
                    clickable :true,
                    type: 'bullets'
                },
                // 切换效果cube,mode,flip,fade,creative,coverflow,cards
                effect: 'fade',
                // cubeEffect: {
                //     slideShadows: true,
                //     shadow: true,
                //     shadowOffset: 100,
                //     shadowScale: 0.7
                // },
            },
            swiperList: [],
        }
    },

    created() {
        this.getSwiper()
    },
    methods: {
        /**
         * 获取数据
         */
        async getSwiper() {
            let terminal = 2
            let country = 1

            // 切换语言
            if(getStore({name: 'language'}) === 'jp') {
                country = 2
            }
            const res = await this.$http({
                url: '/api/siteswiper/list',
                method: 'GET',
                params: {
                    cate: this.cate,
                    terminal,
                    country,
                    status: 1,
                    sortColumns: 'sort',
                    sortType: 'DESC',
                }
            })
            if (this.ResultMessage(res, false)) {
                if(res.data) {
                    this.swiperList = res.data
                }
            }
        },
    }
};
</script>

<style lang="scss" scope>
.swiper_container{
    margin: 0;
    padding: 0;
    // width: 100%;
    // height: 640px;
    overflow: hidden;
    position: relative;



    .swiper-slide {
        text-align: center;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        position: relative;

        .desc{
            position: absolute;
            left: 50px;
            top: 200px;
        }
    }

    .swiper-slide img {
        width: 100%;
        max-width: 100%;
        height: 100%;
    }
}
</style>
